import React, { Component } from "react";
import { Modal, Button, Table, Input, Select, Form, message, Tree, Spin, Tag, Radio, Icon } from "antd";
import { connect } from "dva";
import { getKnowledgeTagDataList } from "@/services/knowledgeLabel";
import menuCheck from "@/utils/menuCheck";
import styles from "./RelatedKnowledgeTag.less";
const { Search } = Input;
const { Option } = Select;

class RelatedKnowledge extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
			total: 0,
			dataList: [],
			relatedList: [],
			Butloading: false,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}


	getList = (knowledgeTagList) => {
		this.setState({ loading: true, relatedList: knowledgeTagList }, () => {
			this.getTableData();
		});
	};

	getTableData = async () => {
		this.setState({ loading: true, });
		let res = await getKnowledgeTagDataList();
		// console.log(res);
		this.setState({
			dataList: res && res.length > 0 ? res : [],
			total: res && res.length ? res.length : 0,
			loading: false,
		});
	}

	handleRelated = (row, i) => {
		// console.log(row, i);
		let { relatedList } = this.state;
		let relatedIds = relatedList.map(j => j.id);
		let rowIds = row.tagList.map(j => j.id);
		// let isDefault = rowIds.filter(k => relatedIds.indexOf(k) > -1);
		let isDefault = relatedList.filter(k => rowIds.indexOf(k.id) > -1);

		relatedList = isDefault && isDefault.length > 0 ? isDefault[0].id == i.id ? [
			...relatedList.filter(l => l != isDefault[0])
		] : [
			...relatedList.filter(l => l != isDefault[0]),
			{ name: i.tagValue, id: i.id, color: row.tagColor }
		] : [...relatedList, { name: i.tagValue, id: i.id, color: row.tagColor }];
		console.log(relatedList);
		this.setState({ relatedList });
	}

	handleClose = tag => {
		let { relatedList } = this.state;
		relatedList = relatedList.filter(i => i != tag);
		this.setState({ relatedList });
	}

	onClose = () => {
		this.setState({
			loading: false,
			total: 0,
			dataList: [],
			relatedList: [],
			Butloading: false,
		}, () => {
			this.props.onClose();
		});
	};

	handelOk = () => {
		const { relatedList } = this.state;
		this.setState({ Butloading: true }, () => {
			this.props.getRelatedList(relatedList);
			this.onClose();
		});
	};

	render() {
		const { visible } = this.props;
		const { dataList, total, loading, relatedList, Butloading } = this.state;
		const { getFieldDecorator } = this.props.form;
		const columns = [
			{
				title: "标签类型",
				dataIndex: "tagTypeValue",
				key: "tagTypeValue",
				width: 120,
				render: (text, row) => {
					let color = row.tagColor.toUpperCase();
					if (color == '#FFF' || color == '#FFFFFF') {
						return text ? (
							<Tag style={{ padding: '2px 10px' }}>{text}</Tag>
						) : '';
					} else {
						return text ? (
							<Tag
								color={row.tagColor && row.tagColor != "" ? row.tagColor : '#000000'}
								style={{
									padding: '5px 12px',
									fontSize: '14px',
									margin: 0,
									color: row.tagColor && row.tagColor != "" ? row.tagColor : '#000000',
									background: row.tagColor && row.tagColor != "" ? row.tagColor + '1A' : '#0000001A',
								}}
							>
								{text}
							</Tag>
						) : '';
					}
				}
			},
			{
				title: "标签值",
				dataIndex: "tagList",
				key: "tagList",
				width: 280,
				render: (_, row) => {
					let color = row.tagColor.toUpperCase();
					let ids = relatedList.map(i => i.id);
					if (color == '#FFF' || color == '#FFFFFF') {
						return (
							<span style={{ display: 'flex', flexFlow: 'wrap', gap: '12px', }}>
								{row.tagList && row.tagList.length > 0 && row.tagList.map((i, j) => (
									<Tag
										key={j}
										color={row.tagColor}
										style={{
											padding: '5px 12px',
											fontSize: '14px',
											margin: 0,
											color: ids.indexOf(i.id) > -1 ? '#FFFFFF' : row.tagColor && row.tagColor != "" ? row.tagColor : '#000000',
											background: ids.indexOf(i.id) > -1 ? '#3E5BFF' : row.tagColor && row.tagColor != "" ? row.tagColor + '1A' : '#0000001A',
										}}
										onClick={() => this.handleRelated(row, i)}
									>
										{i.tagValue}
									</Tag>
								))}
							</span>
						)
					} else {
						return (
							<span style={{ display: 'flex', flexFlow: 'wrap', gap: '12px', }}>
								{row.tagList && row.tagList.length > 0 && row.tagList.map((i, j) => (
									<Tag
										key={j}
										color={row.tagColor && row.tagColor != "" ? row.tagColor : '#000000'}
										style={{
											padding: '5px 12px',
											fontSize: '14px',
											margin: 0,
											color: ids.indexOf(i.id) > -1 ? '#FFFFFF' : row.tagColor && row.tagColor != "" ? row.tagColor : '#000000',
											background: ids.indexOf(i.id) > -1 ? '#3E5BFF' : row.tagColor && row.tagColor != "" ? row.tagColor + '1A' : '#0000001A',
										}}
										onClick={() => this.handleRelated(row, i)}
									>
										{i.tagValue}
									</Tag>
								))}
							</span>
						)
					}
				}
			},
		];

		return (
			<Modal
				title='选择知识标签'
				placement='right'
				closable
				onCancel={this.onClose}
				visible={visible}
				width={'70%'}
				footer={[
					<Button onClick={this.onClose}>取消</Button>,
					<Button type='primary' onClick={this.handelOk} loading={Butloading}>确定</Button>,
				]}
				className={styles.relatedKnowledge}
				destroyOnClose
			>
				<Spin spinning={loading}>
					<div style={{ margin: '20px 0' }}>
						<Table
							dataSource={dataList}
							columns={columns}
							size="middle"
							rowKey={"id"}
							pagination={false}
							scroll={{ y: 400 }}
							footer={() => (
								<div style={{ display: 'flex', flexFlow: 'wrap', gap: '12px', }}>
									{relatedList && relatedList.length > 0 ? relatedList.map((item, index) => (
										<>
											{item.color == '#FFF' || item.color == '#FFFFFF' || item.color == '' ? (
												<Tag
													key={index}
													color={item.color}
													style={{
														padding: '5px 12px',
														fontSize: '14px',
														margin: 0,
														color: item.color,
														background: item.color + '1A',
														// border: '1px solid '+ item.color,
													}}
												>
													<span>{item.name}</span>
													<Icon
														type="close"
														style={{
															color: item.color,
															marginLeft: 8,
														}}
														onClick={() => this.removeRelatedTagData(item)}
													/>
												</Tag>
											) : (
												<Tag
													key={index}
													color={item.color}
													style={{
														padding: '5px 12px',
														fontSize: '14px',
														margin: 0,
														color: item.color,
														background: item.color + '1A',
														// border: '1px solid '+ item.color,
													}}
												>
													<span>{item.name}</span>
													<Icon
														type="close"
														style={{
															color: item.color,
															marginLeft: 8,
														}}
														onClick={() => this.removeRelatedTagData(item)}
													/>
												</Tag>
											)}
										</>
									)) : <>暂未选中知识标签数据</>}
								</div>
							)}
						/>
					</div>
				</Spin>
			</Modal>
		);
	}
}

export default connect(({ user, relatedKnowledge }) => ({
	currentUser: user.currentUser,
	relatedKnowledgeData: relatedKnowledge.data,
}))(Form.create()(RelatedKnowledge));
